<template>
    <div>
        <img src="@/assets/img/classroom1.png" alt="" style="padding-left: 180px">
    </div>
    <div class="el-news">
        <div class="el-breadcrumb">
            <el-breadcrumb style="line-height: 64px" :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/starList' }">双创之星</el-breadcrumb-item>
                <el-breadcrumb-item>{{starName}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-divider />
        <div class="article">
            <div>
                <img :src="starPhoto" alt="" class="star-photo">
            </div>
            <div v-html="starDesc"></div>
        </div>
    </div>
</template>

<script lang="js">
import { ArrowRight } from '@element-plus/icons-vue'
import {useRoute} from "vue-router"
import {fetchSingleStar} from '@/api/star.js'
import {onMounted, ref} from "vue"
export default {
    name: "starDetail",
    setup() {
        let route = useRoute()
        let starDesc = ref()
        let starPhoto = ref()
        let starName = ref()
        const starId = route.query.id
        console.log(starId)
        onMounted(async () => {
            fetchSingleStar(starId).then((response) => {
                console.log(response.data)
                let starData = response.data.data
                starPhoto.value = starData.starPhoto
                starDesc.value = starData.starDesc
                starName.value = starData.starName
            })
        })
        return {
            ArrowRight,
            starPhoto,
            starDesc,
            starName
        }
    }

}
</script>



<style scoped>
    .el-news{
        margin-bottom: 80px;
        margin-left: 300px;
        margin-right: 400px;
        .el-breadcrumb{
            width: 870px;
            height: 64px;
        }
    }

    .star-photo {
        width: 75%;
        height: 75%;
        text-align: right;
    }

</style>
